<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>first-vue</title>
    <style type="text/css">
      * { margin: 0; padding: 0; }
      html,body { background: #eee; }
      ul,li { list-style: none; }
      a { text-decoration: none; }
      img { vertical-align: middle; }
      /* 跳转页面动画 */
      .slide-enter,
      .slide_back-enter {
        position: absolute;
        width: 100%;
      }
      .slide-leave,
      .slide_back-leave {
        position: absolute;
        width: 100%;
      }
      .slide-enter-active,
      .slide_back-enter-active {
        transition: all 0.3s linear;
      }
      .slide-leave-active {
        position: absolute;
        transition: all 0.3s linear;
        transform: translate(-100%);
      }
      .slide-enter{
        transform: translateX(100%);
      }
      .slide_back-leave-active {
        position: absolute;
        transition: all 0.3s linear;
        transform: translate(100%);
      }
      .slide_back-enter {
        transform: translateX(-100%);
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!--其中 transition组件是用来控制页面切换的动画用的，transitionName绑定到的是main.js中的data中的transitionName字段-->
      <transition :name="transitionName">
        <router-view></router-view>
      </transition>
    </div>
    <script type="text/javascript">

      // 计算html的font-size
      (function(){
        function resizeBaseFontSize(){
          var rootHtml = document.documentElement;
          var deviceWidth = rootHtml.clientWidth;

          if(deviceWidth > 640){
            deviceWidth = 640;
          }

          rootHtml.style.fontSize = deviceWidth / 7.5 + "px";
        }

        resizeBaseFontSize();

        window.addEventListener("resize", resizeBaseFontSize, false);
        window.addEventListener("orientationchange", resizeBaseFontSize, false);
      })();
    </script>
  </body>
</html>
